<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  	<style type="text/css">
  		div {
  			max-width: 1000px;
  			min-width: 800px;
  			max-height: 400px;
  			min-height: 200px;
  			border: 1px solid red;
  			/* 使用省略号修饰溢出的文本 */
  			text-overflow: ellipsis;
  			/* 强制文本不换行 */
  			white-space: nowrap;
  			/* 溢出部分隐藏 */
  			overflow: hidden;
  		}
  	</style>
  </head>
  
  <body>
	<div></div>  	
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            console.info("Dom元素加载完毕！");
            console.log("div的宽度：" + $("div").width());
            console.log("div的高度：" + $("div").height());
            var str = "";
            for (var i = 0; i < 20; i++) {
            	str += "省略号出来没！！";
            }
            console.log(str);
            $("div").text(str).prop("title", str);
            console.log("div的宽度：" + $("div").width());
            console.log("div的高度：" + $("div").height());
        });
    </script>
  </body>
</html>